<template>
	<view class="mainlayout pageBg2">
		<view class="fill" :style="{height: navBarHeight() + 'px'}">

		</view>
		<custom-nav-bar></custom-nav-bar>
		<view class="banner" @click="toTest">
			<swiper circular indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff"
				autoplay>
				<swiper-item v-for="item in 6">
					<image :src="'../../static/images/banner/banner'+ item + '.jpg'" mode="aspectFill"></image>
				</swiper-item>

			</swiper>
		</view> 

		<view class="recommend">
			<view class="title">
				智能推荐
			</view>
			<view class="button">
				<button size="mini" class="buttonInterest" @click="toInterest">选择兴趣</button>
			</view>
				
			
		</view>

		<view class='index'>
			<scroll-view scroll-x="true" class='scroll-content  no-scrollbar' :scroll-into-view='scrollIntoIndex'>
				<!-- <view class="scroll-item">
					<text @tap='changeTabRecommend(0,topBar.length-1)'  :class='topBarIndex===0? "f-active-color":"f-color"'>推荐</text>
				</view> -->
				<view :id="'top'+index" class='scroll-item' v-for='(item,index) in topBar' :key='item.id'
					@tap='changeTab(item.id,index)'>
					<text :class='topBarIndex===index? "f-active-color":"f-color"'>{{item.categoryName}}</text>
				</view>
			</scroll-view>


			<swiper @change="onChangeTab" :current="topBarIndex" :style="'height:'+clentHeight+'px;'">
				<swiper-item v-for="item in topBar" :key="item.id">
					<scroll-view scroll-y="true" :style="'height:'+clentHeight+'px;'" class="home-data" >
						<course @touchstart="gtouchstart(course)" 
						@touchmove="handleTouchMove"
							@touchend="gtouchEnd(course.courseId,course.courseName)" v-for="course in item.courseList"
							:key="course.courseId" :courseInfo="course"></course>
							
							
					</scroll-view>
				</swiper-item>
			</swiper>

			<!-- <swiper @change="onChangeTab" :current="topBarIndex" :style="'height:'+clentHeight+'px;'">
				<swiper-item v-for="item in topBar" :key="item.id">
					<view class="home-data">
						<course v-for="course in courseList" :key="course.courseId" :courseInfo="course"></course>
					</view>
				</swiper-item>
			</swiper>
			 -->


		</view>



		<!-- 课程简介弹出框 -->
		<uni-popup ref="coursepopup" type="bottom">
			<view class="coursepop">
				<view class="header">
					<view></view>
					<view class="title">
						课程快速入门
					</view>
					<view class="close" @click="closer">
						<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
					</view>
				</view>
				<scroll-view scroll-y="true">
					<view class="content">
						<text class="lessons_title">授课时长<br /><br /></text>
						<text class="lessons_content">{{courseIntroduceInfo.classHour}}<br /><br/></text>
						<text class="lessons_title">课程介绍<br /><br /></text>
						<text  class="lessons_content">{{courseIntroduceInfo.courseIntroduction}}<br /><br /></text>
						<text class="lessons_title">课程重难点</text>
						<markdown :markdown="courseIntroduceInfo.keyAndDifficultPoints"></markdown>
						<!-- <text  class="lessons_content">{{courseIntroduceInfo.keyAndDifficultPoints}}<br /><br /></text> -->
					</view>
				</scroll-view>
			</view>
		</uni-popup>

		
		<view class="safe-area-inset-bottom">

		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from "vue"
	import {
		navBarHeight
	} from "../../utils/system.js"
	import apis from "../../api/apis.js"
	import {
		onReady,
		
	} from '@dcloudio/uni-app'

	
	
	const toTest = ()=>{
		console.log("点击轮播图")
		uni.reLaunch({
			// url:"/pages/live/live"
			// url:"/pages/test2/test2"
			url:"/pages/memberStorePage/memberStorePage"
		})
		console.log("没有跳转？")
	}

	//swiper内容块的高度
	const clentHeight = ref(0)
	// 定义菜单分类标签所对应的下标
	const topBarIndex = ref(); //只要不是负数 就不会触发对应事件
	// 定义菜单分类标签
	// const topBar = ref([]);
	const topBar = ref([]);
	// 定义单个兴趣对应的课程列表
	const courseList = ref([]);

	const isFirst = ref(false);
	// 获取导航栏里的兴趣菜单
	const getInterest = async () => {
		try {
			const res = await apis.interestTagSelect();
			topBar.value=[
				{
				    id: 0,
				    categoryName: "推荐",
				    categoryGrade: 1,
				    categoryFatherId: 0,
				    schoolId: 9999,
				    courseList: []
				  }
			]
			// topBar.value.push([{id:0,first:"推荐",courseList: []}])
			// topBar.value = res.data;
			// topBar.value.push(res.data.map(item => ({
			// 	...item,
			// 	courseList: []
			// })))
			// 将 res.data 中的每个元素转换并添加到 topBar.value 中
			topBar.value = topBar.value.concat(
			  res.data.map(item => ({
			    ...item,
			    courseList: []
			  }))
			);
			// topBar.value = res.data.map(item => ({
			// 	...item,
			// 	courseList: []
			// }));
			// topBar.value.push({id:0,first:"推荐",courseList: []})
			// topBarIndex.value = topBar.value.length-1
			topBarIndex.value = 0
			console.log(topBar.value);
			console.log(topBarIndex.value);
			isFirst.value = true;
			// console.log("执行getInterest了")
			// changeTab(topBar.value[0].id, 0); //这里发送一次，swiper里面的事件也会发送一次，因为到时候current只要变动，其事件就会被触发
			// 拿推荐数据   
			// changeTabRecommend(0,topBar.value.length-1);
			
			changeTab(topBar.value[0].id, 0); 
		} catch (error) {
			console.log("获取导航栏里的兴趣菜单失败...");
		}
	}
	
	// // 专门是推荐标签使用的方法  不用了
	// const changeTabRecommend = (id, index) => {
	// 	console.log("推荐执行")
	// 	// 这里加了这个 需要多一个判断条件 否则 首次进入页面加载第一个标签的数据是不会被执行的
	// 	// console.log(index + "和" + topBarIndex.value)
	// 	// console.log(isFirst.value)
		
	// 	if (topBarIndex.value === index && !isFirst.value) {
	// 		// isFetching = false; // 如果状态未改变，重置标志位 这里不需要了
	// 		// isFirst.value = false; 不能在这里改状态 因为首次加载 不走这个条件
	// 		// console.log("isFirst" + isFirst.value);
	// 		return;
	// 	}
	// 	// 上面的判断 如果放到下面这行代码后面  
	// 	// 那么当用户重复点击同一标签后,虽然不会重复发送网络请求,但是数据也没有了
	// 	// console.log("courseList开始")
	// 	// console.log()
	// 	topBar.value[index].courseList = []; //这种是同步执行的代码
	// 	// console.log("courseList结束")
	// 	if (isFetching) return; // 如果正在请求，则直接返回
	// 	isFetching = true; // 设置标志位为 true
	// 	// setTimeout(() => {
	// 	// 	// getHomeDataHeight();
	// 	// }, 100); // 等待 DOM 完全渲染完成
	
	// 	// 改变状态
	// 	isFirst.value = false
	
	// 	// console.log("isFirs")
	// 	// console.log(isFirst.value)
	// 	console.log("执行前")
	// 	apis.getCourseByInterest(id).then((res) => {
	// 		console.log("执行中")
	// 		// courseList.value = res.data;
	// 		topBar.value[index].courseList = res.data;
	// 		// console.log(courseList.value);
	// 		isFetching = false; // 请求完成后重置标志位
	// 	}).catch((error) => {
	// 		isFetching = false; // 请求完成后重置标志位
	// 		console.error("获取课程数据失败:", error);
	// 	});
	
	
	// 	topBarIndex.value = index;
	// 	scrollIntoIndex.value = "top" + index;
	// }  

	let isFetching = false; // 添加一个标志位
	const changeTab = (id, index) => {
		// 这里加了这个 需要多一个判断条件 否则 首次进入页面加载第一个标签的数据是不会被执行的
		if (topBarIndex.value === index && !isFirst.value) {
			// isFetching = false; // 如果状态未改变，重置标志位 这里不需要了
			// isFirst.value = false; 不能在这里改状态 因为首次加载 不走这个条件
			// console.log("isFirst" + isFirst.value);
			return;
		}
		// 上面的判断 如果放到下面这行代码后面  
		// 那么当用户重复点击同一标签后,虽然不会重复发送网络请求,但是数据也没有了
		topBar.value[index].courseList = []; //这种是同步执行的代码
		if (isFetching) return; // 如果正在请求，则直接返回
		isFetching = true; // 设置标志位为 true
		// setTimeout(() => {
		// 	// getHomeDataHeight();
		// }, 100); // 等待 DOM 完全渲染完成

		// 改变状态
		isFirst.value = false

		// console.log("isFirs")
		// console.log(isFirst.value)
		apis.getCourseByInterest(id).then((res) => {
			// courseList.value = res.data;
			topBar.value[index].courseList = res.data;
			// console.log(courseList.value);
			isFetching = false; // 请求完成后重置标志位
		}).catch((error) => {
			isFetching = false; // 请求完成后重置标志位
			console.error("获取课程数据失败:", error);
		});


		topBarIndex.value = index;
		scrollIntoIndex.value = "top" + index;
		// console.log(index);

		// 这里可以不写,因为上面每次请求都会把courseList数据覆盖掉
		// courseList.value = [];  
		// topBar.value[index].courseList = [];  写到前面点

		// 不加延时,那么打印出来的课程列表会是上次的
		// 因为上面还在请求新的课程列表数据,异步直接执行了这里
		// setTimeout(()=>{
		// 	console.log("courseList.value")
		// 	console.log(courseList.value)
		// },500)


	}
	
	const onChangeTab = (e) => {
		// changeTab(e.detail.current);
		// console.log(e.detail.current);
		// console.log(1111);
		changeTab(topBar.value[e.detail.current].id, e.detail.current);
		// nextTick(() => {
		// 			setTimeout(() => {
		// 				getHomeDataHeight();
		// 				console.log(clentHeight.value)
		// 			}, 100); // 等待 DOM 完全渲染完成
		// 		});
	}

	const scrollIntoIndex = ref("top-1");

	// 跳转到选择兴趣页面
	const toInterest = () => {
		uni.navigateTo({
			url: "/pages/interest/interest"
		})
	}


	// // 获取内容块的高度赋值
	// const getHomeDataHeight = () => {
	// 	const view = uni.createSelectorQuery().select('.home-data');
	// 	view.boundingClientRect((data, viewport) => {
	// 		if (data) {
	// 			console.log("data")
	// 			console.log(data)
	// 			clentHeight.value = data.height;
	// 			// console.log(2222);
	// 		} else {
	// 			console.error('BoundingClientRect returned null');
	// 		}
	// 	}).exec();
	// };

	// 初始化时获取数据
	onReady(() => {
		// changeTab(topBar.value[0]?.id, 0); // 使用可选链操作符确保安全访问
		// 延迟获取内容块的高度
		// nextTick(() => {
		// 	setTimeout(() => {
		// 		getHomeDataHeight();
		// 	}, 100); // 等待 DOM 完全渲染完成
		// });
		uni.getSystemInfo({
			success: (res) => {
				clentHeight.value =  res.windowHeight - uni.upx2px(550) - getClientHeight();
			}
		})
		
	});
	

	const getClientHeight = ()=>{
		const res = uni.getSystemInfoSync();
		const system = res.platform;
		if (system === 'ios') {
			return 44 + res.statusBarHeight;
		} else if (system === 'android') {
			return 48 + res.statusBarHeight;
		} else {
			return 0;
		}
	}




	const coursepopup = ref(null)
	// 课程简洁弹出框
	const courseIntroduce = () => {
		coursepopup.value.open()
	}

	// 关闭底部弹出框
	const closer = () => {
		coursepopup.value.close()
	}




	// 课程简介的信息  
	const courseIntroduceInfo = ref({})

	// 是否长按的变量记录
	const isLongPress = ref(false);

	//长按事件（起始）
	let timeOutEvent;
	const gtouchstart = (course) => {
		// startX = event.touches[0].clientX;
		// startY = event.touches[0].clientY;
		// console.log(course)
		courseIntroduceInfo.value.classHour = course.classHour;
		courseIntroduceInfo.value.courseIntroduction = course.courseIntroduction;
		courseIntroduceInfo.value.keyAndDifficultPoints = course.keyAndDifficultPoints;
		console.log(courseIntroduceInfo.value);
		timeOutEvent = setTimeout(() => {
			isLongPress.value = true;
			// console.log(123414123)
			courseIntroduce();
		}, 500); //这里设置定时器，定义长按500毫秒触发长按事件
	}
	//手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件

	const gtouchEnd = (id,name) => {
		clearTimeout(timeOutEvent); //清除定时器
		// console.log(timeOutEvent)
		if (timeOutEvent != 0 && !isLongPress.value) {
			// console.log("点击")
			if (Math.abs(movedX) > 20 || Math.abs(movedY) > 20) {
				// console.log('滑动');
				movedX = 0;
				movedY = 0;
			} else {
				uni.navigateTo({
					url: "/pages/video/video?id=" + id +"&name=" + name
				})
			}

		}
		isLongPress.value = false;

	}


	let movedX = 0; // 移动的x坐标距离
	let movedY = 0; // 移动的y坐标距离


	const handleTouchMove = (event) => {
		movedX = event.touches[0].clientX ;
		movedY = event.touches[0].clientY ;

		// 清除定时器，防止滑动过程中触发长按
		clearTimeout(timeOutEvent);
		timeOutEvent = null;
	};
	getInterest();
</script>

<style lang="scss" scoped>
	.mainlayout {
		.banner {
			width: 750rpx;
			padding: 30rpx 0;

			swiper {
				width: 750rpx;
				height: 340rpx;

				&-item {
					width: 100%;
					height: 100%;
					padding: 0 30rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
			}
		}

		.recommend {
			padding: 0rpx 30rpx 10rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom:0.5rpx solid #f4f4f4;
			.title{
				font-weight: 600;
				font-size: 35rpx;
			}
			.buttonInterest {
				color: white;
				background-color: #2895fb;
				border-radius: 10rpx;
			}
		}

		.index {
			.scroll-content {
				width: 100%;
				height: 80rpx;
				white-space: nowrap;
			}

			// 去除滚动轴
			.no-scrollbar {

				/* 隐藏滚动条 */
				::-webkit-scrollbar {
					width: 0 !important;
					/* 隐藏水平滚动条 */
					height: 0 !important;
					/* 隐藏垂直滚动条 */
				}
			}

			.scroll-item {
				display: inline-block;
				padding: 10rpx 30rpx;
				font-size: 32rpx;
			}

			.f-active-color {
				padding: 10rpx 0;
				border-bottom: 6rpx solid #33A3DC;
				color: #49BDFB;
			}

			.f-color {
				color: #636263;
			}

		}

		.coursepop {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 30rpx 30rpx 0 0;
			overflow: hidden;

			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					color: black;
					font-size: 30rpx;
					font-weight: 600;
					// padding-left: 6rpx;
				}

				.close {
					padding: 6rpx;
				}
			}
			.lessons_title {
				font-size: 33rpx;
				font-weight: 700;
				padding: 20rpx 0rpx;
			}

			scroll-view {
				max-height: 50vh;

				.content {
					// display: flex;
					padding: 16rpx 0;
					font-size: 32rpx;
					line-height: 1.7em;

					.ask {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10rpx;

						input {
							border: 1rpx solid #636263;
							width: 70%;
							padding: 10rpx;
						}

						button {
							background-color: #33A3DC;
							color: white;
						}
					}
				}
			}
		}
	}
</style>